<template>
    <div class="fullHeightLayout" >
        <a-layout class="fullHeightLayout" style="margin-bottom: 60px">
            <a-layout class="fullHeightLayout">
                <a-layout-sider width="360" class="fullHeightLayout">
                    <components-container></components-container>
                </a-layout-sider>
                <a-layout-content class="fullHeightLayout">
                    <preview-container></preview-container>
                </a-layout-content>
                <a-layout-sider style="background: #ECECEC; width: 390px; max-width: 390px; flex: 0 0 390px" class="fullHeightLayout">
                    <config-container></config-container>
                </a-layout-sider>
            </a-layout>
        </a-layout>
    </div>
</template>

<style>
    .publish-qrcode canvas {
        width: 254px;
        display: inline-block;
    }

    .header-tool-buttons-container {
        color: white;
        position: relative;
        margin: 20px auto auto auto;
        display: table;
    }

    .fullHeightLayout{
        height: 100%;
    }
</style>

<script>
    import ComponentsContainer from "./../views/ComponentsContainer";
    import PreviewContainer from "./../views/PreviewContainer";
    import ConfigContainer from "./../views/ConfigContainer";


    export default {
        components: {
            ComponentsContainer,
            ConfigContainer,
            PreviewContainer,
        },
        data() {
            return {

            }
        },
        methods: {

        },
        computed: {
        },
    }
</script>